<template>
	<view class="warehousingToBeCon">
		<!-- nav -->
		<view class="nav">
			<view class="flex_between">
				<view class="nav_title">
					<view :class="{'active':isActive==1}" @click="chenked(1)">
						全部
					</view>
				</view>
				<view class="nav_title">
					<view :class="{'active':isActive==2}" @click="chenked(2)">
						服务贸易
					</view>
				</view>
				<view class="nav_title">
					<view :class="{'active':isActive==3}" @click="chenked(3)">
						金融科技
					</view>
				</view>
				<view class="nav_title">
					<view :class="{'active':isActive==4}" @click="chenked(4)">
						建筑建材
					</view>
				</view>
			</view>
		</view>
		<!-- nav-item -->
		<view class="nav_item" v-if="isActive==1">
			<view class="box1" @click="aa">
				<image src="./img/jd.jpg" mode="" @click="aa" ></image>
				<view class="b1">
					
				<text class="p1">京东云计算有限公司</text>
				<text class="p2">京东智联云</text>
				<text class="d1">
					
					<text class="p3">展台id:12345</text>
					<text>浏览量:12346</text>
				</text>
				
				</view>
				
					
				
			</view>
			<view class="box1" @click="aa">
				<image src="./img/jd.jpg" mode=""></image>
				<view class="b1">
					
				<text class="p1">京东云计算有限公司</text>
				<text class="p2">京东智联云</text>
				<text class="d1">
					
					<text class="p3">展台id:12345</text>
					<text>浏览量:12346</text>
				</text>
				
				</view>
				
					
	
			</view>
			
		</view>
		<view class="nav_item" v-if="isActive==2">
		<view class="box1" @click="aa">
			<image src="./img/jd2.jpg" mode=""></image>
			<view class="b1">
				
			<text class="p1">京东云计算有限公司</text>
			<text class="p2">京东智联云</text>
			<text class="d1">
				
				<text class="p3">展台id:12345</text>
				<text>浏览量:12346</text>
			</text>
			
			</view>
			
				
			
		</view>
		<view class="box1" @click="aa"> 
			<image src="./img/jd2.jpg" mode=""></image>
			<view class="b1">
				
			<text class="p1">京东云计算有限公司</text>
			<text class="p2">京东智联云</text>
			<text class="d1">
				
				<text class="p3">展台id:12345</text>
				<text>浏览量:12346</text>
			</text>
			
			</view>
			
				
			
		</view>
		<view class="box1" @click="aa">
			<image src="./img/jd.jpg" mode=""></image>
			<view class="b1">
				
			<text class="p1">京东云计算有限公司</text>
			<text class="p2">京东智联云</text>
			<text class="d1">
				
				<text class="p3">展台id:12345</text>
				<text>浏览量:12346</text>
			</text>
			
			</view>
			
				
			
		</view>
		</view>
		<view class="nav_item" v-if="isActive==3">
			<view class="box1" @click="aa">
				<image src="./img/jd2.jpg" mode=""></image>
				<view class="b1">
					
				<text class="p1">京东云计算有限公司</text>
				<text class="p2">京东智联云</text>
				<text class="d1">
					
					<text class="p3">展台id:12345</text>
					<text>浏览量:12346</text>
				</text>
				
				</view>
				
					
				
			</view>
			<view class="box1" @click="aa">
				<image src="./img/jd2.jpg" mode=""></image>
				<view class="b1">
					
				<text class="p1">京东云计算有限公司</text>
				<text class="p2">京东智联云</text>
				<text class="d1">
					
					<text class="p3">展台id:12345</text>
					<text>浏览量:12346</text>
				</text>
				
				</view>
				
					
				
			</view>
			<view class="box1">
				<image src="./img/jd.jpg" mode=""  @click="aa" ></image>
				<view class="b1">
					
				<text class="p1">京东云计算有限公司</text>
				<text class="p2">京东智联云</text>
				<text class="d1">
					
					<text class="p3">展台id:12345</text>
					<text>浏览量:12346</text>
				</text>
				
				</view>
				
					
				
			</view>
		</view>
		<view class="nav_item" v-if="isActive==4">
			<view class="box1" @click="aa">
				<image src="./img/jd.jpg" mode=""></image>
				<view class="b1">
					
				<text class="p1">京东云计算有限公司</text>
				<text class="p2">京东智联云</text>
				<text class="d1">
					
					<text class="p3">展台id:12345</text>
					<text>浏览量:12346</text>
				</text>
				
				</view>
				
					
				
			</view>
			<view class="box1" >
				<image src="./img/jd.jpg" mode="" @click="aa"></image>
				<view class="b1">
					
				<text class="p1">京东云计算有限公司</text>
				<text class="p2">京东智联云</text>
				<text class="d1">
					
					<text class="p3">展台id:12345</text>
					<text>浏览量:12346</text>
				</text>
				
				</view>
				
					
				
			</view>
			<view class="box1" @click="aa">
				<image src="./img/jd.jpg" mode=""></image>
				<view class="b1">
					
				<text class="p1">京东云计算有限公司</text>
				<text class="p2">京东智联云</text>
				<text class="d1">
					
					<text class="p3">展台id:12345</text>
					<text>浏览量:12346</text>
				</text>
				
				</view>
				
					
				
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				isActive: 1
			}
		},
		methods: {
			chenked(type) {
				this.isActive = type
				
			},
			aa(){
				uni.navigateTo({
					url:'./zt'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.warehousingToBeCon {
		width: 100%;

		.nav {
			background-color: #fff;

			.flex_between {
				display: flex;

				.nav_title {
					height: 88rpx;
					line-height: 88rpx;
					width: 100%;
					text-align: center;
					font-size: 32rpx;
					font-family: "PingFang";
					color: rgb(102, 102, 102);
					border-radius: 20px;
					background:#f6f6f6;
				}
			}
		}
	}

	.active {
		position: relative;
		color: #276aff;
		border-radius: 20px;
		background:#ecf0fd;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 100rpx;
		height: 4rpx;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;

	}
	.box1{
		margin: 10px;
		width: 100%;
		display: flex;
		flex-direction:row;
		flex-wrap: wrap;
	}
	.box1 image{
		width : 120px;
		height: 120px;
	}
	.b1{
		width: 60%;
		display: flex;
flex-direction: column;
	}
	.p1{
		font-size: 18px;
		margin: 10px;
	}
	.p2,.d1{
		font-size: 14px;
		color: #ccc;
	}
	.p2{
		margin-left: 10px;
	}
	.d1{
		margin: 10px;
	}
	.p3{
		margin-right: 10px;
	}
</style>
